<template>
<!-- 收益 -->
  <view class="integral wap">
		<!-- 上面 -->
		<view class="top-mian">
			<view class="top-mian-t">
				<view class="tm">
					<view class="text2"  @click="toGift()">
						邀请明细
						<image class="rimg" :src="ossPath+'/upload/1711011951088796.png'"></image>
					</view>
					<view class="text3">可提现金额</view>
					<view class="money">{{total}}</view>
					<view class="text1">礼物数：{{total}}</view>
				</view>
			</view>
			<view class="proportionbox">
    			<view class="textbox">
    				<view class="text1">当前提现比例100%</view>
					<view class="text1">
						会员特权，可享全额提现
					</view>
    			</view>
				<progress :percent="pgList" activeColor="#0D0D0D" border-radius="5px" stroke-width="10" />
    		</view>
			<view class="balance" @click="openTixia">立即结算</view>
		</view>
    <!-- 中部 -->
		<view class="cont-mian">
			<view class="cm1">
				<view class="cm1-L-t">
						如何邀请好友?
				</view>
				<view class="cm1-L">
					<image class="navimg" :src="ossPath+'/upload/17110994585381005.png'"></image>
					<view class="cm1-L-b">
						邀请好友加入挥友,可获得高额回报
					</view>
					<view class="invitbox" @click="invit">立即要请</view>
				</view>
				<!-- <button class="cm-r"  @click="invit">
					立即邀请
				</button> -->
			</view>
    </view>
    <!-- 下部 -->
		<view class="btm-mian">
			<h1>邀请后可获得哪些收入？</h1>
			<view class="vipbox">
				<image class="vipimg" :src="ossPath+'/upload/1711425293338630.png'"></image>
				<view class="textbox">
					<view class="t1">好友每次购买会员，获得10%分成</view>
					<view class="t2">邀约多多，分成多多</view>
				</view>
			</view>
			<view class="vipbox">
				<image class="vipimg" :src="ossPath+'/upload/1711099347308133.png'"></image>
				<view class="textbox">
					<view class="t1">好友每次收到礼物，获得10%分成</view>
					<view class="t2">打赏多多，分成多多</view>
				</view>
			</view>
		</view>
		
		<view class="canvas">
			<canvas :style="{ width: posterimgwidth_b + 'rpx', height: posterimgheight + 'rpx' }" :canvas-id="'firstCanvas'+i"
				class="canvasposition" v-for="(l,i) in activityList.ShareImages" :key="i"></canvas>
		</view>
		<uni-popup ref="poster" type="center">
			<view class="painting">
				<swiper class="swiper" :indicator-dots="false" circular="true">
					<swiper-item v-for="(l,i) in photosurl" :key="i">
						<image :src="l.img" :style="{ width: posterimgwidth_b + 'rpx', height: posterimgheight + 'rpx' }"  mode="" @tap="close_poster">
						</image>
						<view class="keep" @tap="saveimg(i)">保存相册，分享到朋友圈</view>
						<!-- 	<text class="tips">可以左右滑动,选择其他模板</text> -->
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>
		
		<uni-popup ref="tixia" type="center">
		    <view class="pop_con">
		        <view class="hd f1">收入提现</view>
		        <view class="inp">
		            <view class="lab">数量:</view>
		            <input type="number" v-model="price" placeholder="请输入提现数量">
		        </view>
		        <view class="btns">
		            <u-button text="取消" @click="closeTixia"></u-button>
		            <u-button type="success" text="确定" @click="depoist"></u-button>
		        </view>
		    </view>
		</uni-popup>
  </view>

</template>

<script>
export default {
	data(){
		return{
			pgList: "100",
			activityList: [],
			posterimgwidth_b:'',
			posterimgheight_b: '',
			posterimgwidth: '',
			posterimgheight: '',
			photosurl: [],
			total:0,
			price:10,
			ossPath:null,
		}
	},
	
	methods:{
		closeTixia(){
		    this.$refs.tixia.close();
		},
		async openTixia(){
			
			if(this.total<=0){
				this.$pv.msg('暂无可结算的礼物数')
				return;
			}
			
			//先判断用户是否实名，如果未实名，跳转至实名页面
			let u = uni.getStorageSync('user');
			let res = await this.$api.post('User/GetUserInfo', {
				ID: u.UserID
			});
			
			let _this=this;
			if(res.data.IsTrueName!=1){
				
				uni.showModal({
					title: '温馨提示',
					content: '结算需要实名认证，需要认证吗？',
					confirmText: "去认证",
					success: function(res) {
						if (res.confirm) {
							_this.nav_to('/pages/user/real_name');
						} else if (res.cancel) {
				
						}
					}
				});
				
				return;
			}
			
			// if(res.data.Bank==''){
				
			// 	uni.showModal({
			// 		title: '温馨提示',
			// 		content: '您未设置结算收款账号，需要设置吗？',
			// 		confirmText: "去设置",
			// 		success: function(res) {
			// 			if (res.confirm) {
			// 				_this.nav_to('/pages/user/fee_setting?type=3');
			// 			} else if (res.cancel) {
				
			// 			}
			// 		}
			// 	});
			// 	return;
			// }
			
			this.price=this.total;
			
		    this.$refs.tixia.open();
		},
		
		async getSaleChannelDetail(){
				let res = await this.$api.post('/SaleChannel/SaleChannelDetail',{CompanyID:6002});

				this.total = res.data.InviteIncome;
		},
				
		async init(){
			await this.getSaleChannelDetail();
			
		},			
		async depoist() {
			//提现
			this.$pv.load();
			this.price = parseInt(this.price);
			
			if (this.price < 10) {
				this.$pv.msg('提现不能小于10');
				return;
			}
			
			if (this.price > this.total) {
				this.$pv.msg('提现金额不能超过可提现金额');
				return;
			}
			
			if (this.price > 500) {
				this.$pv.msg('提现不能大于500');
				return;
			}
			
			
			
			let d = await this.$api.post('/SaleChannel/Deposit',{Money:this.price,CommissionType:'邀请收入'});
			
			console.log(JSON.stringify(d.data));
			
			if(d.data==-1){
				this.$pv.closeLoad();
			    this.$pv.msg(d.message);
			    return;
			}else{
			    setTimeout(() => {
			        this.$pv.closeLoad();
			        this.$pv.msg('提现申请成功，10分钟内微信零钱到账');
					
					this.$refs.tixia.close();
					
			        this.init();
			    },500);
				
			}
		},
		
		invit(){
			this.$refs.poster.open();
			this.photosurl = [];
			this.activityList.ShareImages.forEach((l, i) => {
				this.draw(i);
			})
		},
		toGift() {
			this.nav_to('/pages/user/user_commission?t=2')
		},
		//获取活动内容
		async activity_list() {
			let res = await this.$api.post('Action/GetActionDetail', {
				ID: 1,
				CompanyID: 6002
			});
			if (res.code == 0) {
				this.activityList = res.data;
				console.log(this.activityList, '-------------ha')
		
				this.activityList.ShareImgPars
		
				this.posterimgwidth = this.activityList.ShareImgPars.split(',')[4]
				this.posterimgheight = this.activityList.ShareImgPars.split(',')[5]
				let r = await this.$api.post('Action/CreateShareQR', {
					Page: this.activityList.ShareGoUrl,
					CompanyID: 6002
				});
				if (r.code == 0) {
					this.share_code = r.data;
				}
			}
		},

		async getImgHeight(src){
			let img=(await uni.getImageInfo({
				src
			}));
			this.posterimgheight=img[1].height;
			//this.posterimgheight=img[1].height / (uni.upx2px(img[1].height)/img[1].height);
		},
		async getImgWidth(src){
			let img=(await uni.getImageInfo({
				src
			}));
			this.posterimgwidth=img[1].width;
			//this.posterimgwidth=img[1].width / (uni.upx2px(img[1].width)/img[1].width);
		},
		async getUserInfo() {
			let u = uni.getStorageSync('user');
			let res = await this.$api.post('User/GetUserInfo', { ID: u.UserID });
			this.user = res.data;
		},
		async draw(i) {
			uni.showLoading({
				title: '正在生成',
				mask: true
			});
			const system = uni.getSystemInfoSync();
			const w = system.windowWidth / 750;
			
		
			//src: this.activityList.ShareImages[i].BackImg
		
			this.getImgWidth(this.user.UserImgs);
			this.getImgHeight(this.user.UserImgs);
			
		
			const posterimg = await uni.getImageInfo({
				src: this.user.UserImgs
			});
			
		
			const codeimg = await uni.getImageInfo({
				src: this.share_code
			});
		
			const codeimgX = this.activityList.ShareImages[i].QR_Location.split(',')[0] - 0
			const codeimgY = this.activityList.ShareImages[i].QR_Location.split(',')[1] - 0
			
			const codeimgwidth = this.activityList.ShareImages[i].QR_Location.split(',')[2] - 0
			const codeimgheight = this.activityList.ShareImages[i].QR_Location.split(',')[3] - 0
			
			this.posterimgwidth_b = this.activityList.ShareImages[i].QR_Location.split(',')[4] - 0				
			this.posterimgheight_b = this.activityList.ShareImages[i].QR_Location.split(',')[5] - 0
		
			const fillTextX = this.activityList.ShareImages[i].QR_Location.split(',')[6] - 20
			const fillTextY = this.activityList.ShareImages[i].QR_Location.split(',')[7] - 0
		
			var context = uni.createCanvasContext('firstCanvas' + i);
		
			this.posterimgheight = this.posterimgheight*this.posterimgwidth_b/this.posterimgwidth;
			
			context.beginPath();
			context.drawImage(posterimg[1].path, 0, 0, this.posterimgwidth_b * w, this.posterimgheight * w);
			context.closePath();
		
		
			context.beginPath();
			context.setFontSize(36 * w);
			context.setFillStyle('#FFFFFF');
			context.fillText('挥友', 20 * w, 60 * w);
			context.closePath();
		
			context.beginPath();
			context.setFontSize(36 * w);
			context.setFillStyle('#FFFFFF');
			context.fillText('社交组局平台', 20 * w, 110 * w);
			context.closePath();
		
			context.beginPath();
			context.setFontSize(36 * w);
			context.setFillStyle('#FFFFFF');
			context.fillText(this.user.Name, 20 * w, (this.posterimgheight-codeimgheight) * w);
			context.closePath();
		
			context.beginPath();
			context.setFontSize(26 * w);
			context.setFillStyle('#FFFFFF');
			context.fillText('邀请您加入挥友', 20 * w, (this.posterimgheight-codeimgheight+40) * w);
			context.closePath();
		
			context.beginPath();
			context.setFontSize(20 * w);
			context.setFillStyle('#FFFFFF');
			context.fillText('长按识别二维码', fillTextX * w, (this.posterimgheight-codeimgheight-10) * w);
			context.closePath();
			
			context.beginPath();
			context.drawImage(codeimg[1].path, codeimgX * w, (this.posterimgheight-codeimgheight-30) * w, codeimgwidth * w, codeimgheight * w);
			context.closePath();
		
			context.draw(false, () => {
				setTimeout(() => {
					var that = this
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						canvasId: 'firstCanvas' + i,
						success(res) {
							// that.photosurl = res.tempFilePath
							// console.log(that.photosurl)
							that.photosurl.push({
								img: res.tempFilePath
							})
							uni.showToast({
								title: '生成成功'
							});
						},
					})
				}, 100)
			});
		
		},
		
		saveimg(i) {
			var that = this
			uni.showLoading({
				title: '正在保存',
				mask: true
			});
			uni.authorize({
				/* scope.writePhotosAlbum 类型是保存到相册 */
				scope: 'scope.writePhotosAlbum',
				success() {
					/* 已授权进入 */
					/* 保存图片到相册方法方法 */
					/* 获取图片的信息 */
					uni.getImageInfo({
						src: that.photosurl[i].img,
						success: function(image) {
							/* 保存图片到手机相册 */
							uni.saveImageToPhotosAlbum({
								filePath: image.path,
								success: function() {
									uni.showToast({
										title: '保存成功'
									});
									that.close_poster()
								},
								// complete(res) {
								// 	console.log(res);
								// }
							});
						},
						fail: function() {
							console.log(that.photosurl[i].img);
						}
					});
				},
				complete(res) {
					/* 判断如果没有授权就打开设置选项让用户重新授权 */
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.writePhotosAlbum']) {
								/* 打开设置的方法 */
								uni.showModal({
									content: '没有授权保存图片到相册,点击确定去允许授权',
									success: function(res) {
										if (res.confirm) {
											/* 打开设置的API*/
											uni.openSetting({
												success(res) {
													console.log(res.authSetting);
												}
											});
										} else if (res.cancel) {
											uni.showModal({
												cancelText: '取消',
												confirmText: '重新授权',
												content: '你点击了取消，将无法进行保存操作',
												success: function(res) {
													if (res.confirm) {
														uni.openSetting({
															success(
																res) {
																/* 授权成功 */
																console
																	.log(
																		res
																		.authSetting
																	);
															}
														});
													} else if (res.cancel) {
														console.log('用户不授权');
													}
												}
											});
										}
									}
								});
							}
						}
					});
				}
			})
		}	//点击保存图片
			
		
	},
	onLoad() {
		this.activity_list();
	},
	onReady() {
	
	},
	onShow() {
		this.init();
		this.getUserInfo();
		this.ossPath = this.$ossPath
	},
}
</script>

<style lang="scss">
page{
	background-color: #F6F6F6;
}
.bg{
    background: #262626;
    border-radius: 16rpx;
		
}
.top-mian{
	min-height: 450rpx;
	width: 100%;
	background: #fff;
	border-radius: 48rpx;
	padding-bottom: 32rpx;
}
.top-mian-t{
	margin-top: 30rpx;
	height: 500rpx;
	border-radius: 48rpx 48rpx 0 0;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align: center;
	background: #fff;
	.tm {
		position: relative;
	
		.text2 {
			color: #999999;
			font-size: 28rpx;
			position: absolute;
			right: -200rpx;
			top: -50rpx;
			.rimg{
				width: 32rpx;
				height: 32rpx;
			}
		}
		
		.text3{
			color: #333333;
			font-size: 28rpx;
		}
		.text1{
			font-size: 28rpx;
			color: #999999;
		}
	}
}
.money{
	color: #333333;
	font-size: 72rpx;
	font-weight: 600;
	height: 120rpx;
}
.tm button{
	margin: 30rpx;
	background-color: #e8d8b4;
	border-radius: 10px;
	width: 180rpx;
	height: 66rpx;
	line-height: 66rpx;
}
.cont-mian{
	height: 250rpx;
}
.cm1{
	height: 50%;
}
.proportionbox{
	.textbox{
		display: flex;
		justify-content: space-around;
		margin-bottom: 15rpx;
		.text1{
			font-size: 24rpx;
			color: #999999;
		}
	}
	
}
.balance{
	width: 380rpx;
	height: 80rpx;
	background-color: #0D0D0D;
	color: #fff;
	font-size: 32rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 48rpx;
	margin: 0 auto;
	margin-top: 50rpx;
	margin-bottom: 32rpx;
}
.cm-t{
	display: flex;
	align-items:center;
	font-size: 66rpx;
	color: #bca14b;
}
.cm1-L-t{
	margin: 32rpx 0 20rpx 24rpx;
	color: #333333;
	font-size: 32rpx;
	font-weight: 600;
	height: 40%;
	line-height: 70rpx;
}
.cm1-L{
	display: flex;
	align-items: center;
	width: 95%;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 24rpx;
	height: 162rpx;
	.navimg{
		width: 98rpx;
		height: 98rpx;
		margin-left: 10rpx;
	}
	.invitbox{
		width: 176rpx;
		height: 64rpx;
		border: 1rpx solid #0D0D0D;
		border-radius: 32rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #0D0D0D;
	}
}
.cm1-L-b{
	width: 47%;
	color: #333333;
	overflow: hidden;
	font-size: 28rpx;
	margin-left: 22rpx;
	margin-right: 24rpx;
}
.cm-r{
	line-height: 50rpx;
	height: 55rpx;
	width: 160rpx;
	color: white;
	border-radius: 5px;
	border: 2rpx solid white;
	margin-top: 40rpx;
	font-size: 30rpx;
}
.btm-mian{
	padding: 0;
	margin-left: -30rpx;
	margin-top: 20rpx;
	height: auto;
	width: 100vw;
	min-height: 770rpx;
	border-radius: 25rpx;
	.vipbox{
		width: 702rpx;
		height: 162rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin: 16rpx auto;
		border-radius: 24rpx;
		.vipimg{
			width: 98rpx;
			height: 98rpx;
			margin-left: 20rpx;
		}
		.textbox{
			margin-left: 20rpx;
			.t1{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 10rpx;
			}
			.t2{
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}
.btm-mian h1{
	padding: 50rpx 0rpx 0rpx 20rpx;
	color:#333333;
	font-size: 32rpx;
	font-weight: 600;
}
.bm-b{
	margin: 25rpx;
	background-color: #ffffff;
	height: 180rpx;
	border-radius: 10rpx;
	box-shadow:15rpx 15rpx 25rpx #eff6fc;
}
.bm-b ul{
	height: 100%;
	display: flex;
	align-items: center;
}
.bm-b ul li{
	margin-left: 20rpx;
	background-color: black;
	border-radius: 50%;
	height: 15rpx;
	width: 15rpx;
}
.bm-b-t{
	color: black;
	font-size: 32rpx;
	margin: 10rpx;
}
.bm-b-btm{
	height: 60rpx;
	width: 180rpx;
	border: 1px black solid;
	color: black;
	line-height: 60rpx;
}
.bm-b-T1{
	display: flex;
	align-items: center;
}
.bm-b-T2{
	display: flex;
	align-items: center;
}
.card-bk{
	height: 30rpx;
	width: 50rpx;
	background-color: black;
	color: white;
	font-size: 18rpx;
	text-align: center;
	margin-left: 30rpx;
}
.card-gl{
	height: 30rpx;
	width: 50rpx;
	background-color: #d3be8b;
	color: black;
	font-size: 18rpx;
  text-align: center;	
	margin-left: 15rpx;
}
.card-sl{
	height: 30rpx;
	width: 50rpx;
	background-color: #e1dfe0;
	color: black;
	font-size: 18rpx;
	text-align: center;		
	margin-left: 15rpx;
}
.bm-b-T3{
	font-size: 26rpx;
	color: #d8cba6;
	margin-left: 40rpx;
}
.bm-b-T2 image{
	margin-left: 40rpx;
	height: 30rpx;
	width: 30rpx;
}


	.canvas {
		overflow: hidden;
		position: relative;

		.canvasposition {
			position: absolute;
			left: 4000rpx;
			top: 0;
		}
	}

	.painting {
		.swiper {
			width: 750rpx;
			height: 1334rpx;
			padding-top:20rpx;
			
			image{
				margin:20px;
			}
			.keep {
				width: 750rpx;
				height: 80rpx;
				background: #ffc371;
				color: #ffffff;
				border-radius: 40rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				margin-top: 20rpx;
				text-align: center;
			}

			.tips {
				width: 600rpx;
				display: inline-block;
				color: #EEEEEE;
				margin-top: 20rpx;
				font-size: 28rpx;
				line-height: 28rpx;
				text-align: center;
			}
		}
	}
	
	
	.pop_con{
	    height: 400rpx;
	    background: #fff;
	    width: 650rpx;
	    border-radius: 16rpx;
		border: 1px solid #FEF0BC;
	    .hd{
	        height: 90rpx;
	        line-height: 90rpx;
	        border-bottom: 1px solid #eee;
	        text-align: center;
	        line-height: 90rpx;
	        color: #333;
	        font-weight: bolder;
	    }
	    .inp{
	        margin-top: 30rpx;
	        padding-left: 30rpx;
	        padding-right: 30rpx;
	        .lab{
	            font-size: 32rpx;
	            color: #666;
	        }
	        input{
	            margin-top: 10rpx;
	            height: 80rpx;
	            line-height: 80rpx;
	            width: 100%;
	            padding-left: 10rpx;
	            box-sizing: border-box;
	            border: 1px solid #eee;
	            border-radius: 10rpx;
	            color: #000;
	        }
	    }
	    .btns{
	        margin-top: 40rpx;
	        display: flex;
	         padding-left: 30rpx;
	        padding-right: 30rpx;
	        justify-content: space-between;
	        /deep/ .u-button__text{
	            color: #666;
	        }
	        /deep/ .u-button--success{
	           text{
	            color: #fff !important;
	           }
			   background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
	        }
	        /deep/ .u-button{
	            width: 290rpx;
	        }
	    }
	}
	
</style>